<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="timeline">
            <el-form-item label="显示">
              <el-radio v-model="timeline.show" :label="true">是</el-radio>
              <el-radio v-model="timeline.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="时间间隔">
                <el-input-number v-model="timeline.playInterval" :min="0" size="mini"/>
            </el-form-item>
            <el-form-item  label="方向">
               <el-select v-model="timeline.orient" placeholder="horizontal" size="mini">
                <el-option label="水平" value="horizontal"/>
                <el-option label="垂直" value="vertical"/>
              </el-select>
            </el-form-item>
            <el-form-item label="距左侧">
               <el-input v-model="timeline.left" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距右侧">
               <el-input v-model="timeline.right" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距顶部">
               <el-input v-model="timeline.top" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距底部">
               <el-input v-model="timeline.bottom" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="大小">
                <el-input-number v-model="timeline.symbolSize" :min="0" :max="40" size="mini"/>
            </el-form-item>
            <el-form-item label="颠倒">
              <el-radio v-model="timeline.inverse" :label="true">是</el-radio>
              <el-radio v-model="timeline.inverse" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="自动播放">
              <el-radio v-model="timeline.autoPlay" :label="true">是</el-radio>
              <el-radio v-model="timeline.autoPlay" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="反向播放">
              <el-radio v-model="timeline.rewind" :label="true">是</el-radio>
              <el-radio v-model="timeline.rewind" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="循环播放">
              <el-radio v-model="timeline.loop" :label="true">是</el-radio>
              <el-radio v-model="timeline.loop" :label="false">否</el-radio>
            </el-form-item>
            <el-divider content-position="center">普通样式</el-divider>
            <el-divider content-position="center">线条</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="timeline.lineStyle.show" :label="true">是</el-radio>
              <el-radio v-model="timeline.lineStyle.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="颜色" >
              <el-color-picker v-model="timeline.lineStyle.color" show-alpha size="small" @active-change="timelineLinetStyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="timeline.lineStyle.width" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-form-item  label="类型">
               <el-select v-model="timeline.lineStyle.type" placeholder="solid" size="mini">
                <el-option label="————————" value="solid"/>
                <el-option label="------------------------" value="dashed"/>
                <el-option label="························" value="dotted"/>
              </el-select>
            </el-form-item>
            <el-divider content-position="center">标签</el-divider>
            <el-form-item  label="颜色" >
              <el-color-picker v-model="timeline.label.color" show-alpha size="small" @active-change="timelineLabelColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="字号">
                <el-input-number v-model="timeline.label.fontSize" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-divider content-position="center">控制按钮</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="timeline.controlStyle.show" :label="true">是</el-radio>
              <el-radio v-model="timeline.controlStyle.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="播放按钮">
              <el-radio v-model="timeline.controlStyle.showPlayBtn" :label="true">是</el-radio>
              <el-radio v-model="timeline.controlStyle.showPlayBtn" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="后退按钮">
              <el-radio v-model="timeline.controlStyle.showPrevBtn" :label="true">是</el-radio>
              <el-radio v-model="timeline.controlStyle.showPrevBtn" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="前进按钮">
              <el-radio v-model="timeline.controlStyle.showNextBtn" :label="true">是</el-radio>
              <el-radio v-model="timeline.controlStyle.showNextBtn" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="位置">
               <el-select v-model="timeline.controlStyle.position" placeholder="left" size="mini">
                <el-option label="左" value="left"/>
                <el-option label="右" value="right"/>
                <el-option label="上" value="top"/>
                <el-option label="下" value="bottom"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="大小">
                <el-input-number v-model="timeline.controlStyle.itemSize" :min="0" :max="40" size="mini"/>
            </el-form-item>
            <el-form-item  label="间距">
                <el-input-number v-model="timeline.controlStyle.itemGap" :min="0" :max="40" size="mini"/>
            </el-form-item>
            <el-form-item  label="颜色" >
              <el-color-picker v-model="timeline.controlStyle.color" show-alpha size="small" @active-change="timelineControltStyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="边框颜色" >
              <el-color-picker v-model="timeline.controlStyle.borderColor" show-alpha size="small" @active-change="timelineControlStyleBorderColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="边框宽度">
                <el-input-number v-model="timeline.controlStyle.borderWidth" :min="0" :max="40" size="mini"/>
            </el-form-item>

            <el-divider content-position="center">强调样式</el-divider>
            <el-divider content-position="center">标签</el-divider>
            <el-form-item  label="颜色" >
              <el-color-picker v-model="timeline.emphasis.label.color" show-alpha size="small" @active-change="timelineEmphasisLabelColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="字号">
                <el-input-number v-model="timeline.emphasis.label.fontSize" :min="0" :max="20" size="mini"/>
            </el-form-item>
            <el-divider content-position="center">控制按钮</el-divider>
            <el-form-item label="显示">
              <el-radio v-model="timeline.emphasis.controlStyle.show" :label="true">是</el-radio>
              <el-radio v-model="timeline.emphasis.controlStyle.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="播放按钮">
              <el-radio v-model="timeline.emphasis.controlStyle.showPlayBtn" :label="true">是</el-radio>
              <el-radio v-model="timeline.emphasis.controlStyle.showPlayBtn" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="后退按钮">
              <el-radio v-model="timeline.emphasis.controlStyle.showPrevBtn" :label="true">是</el-radio>
              <el-radio v-model="timeline.emphasis.controlStyle.showPrevBtn" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="前进按钮">
              <el-radio v-model="timeline.emphasis.controlStyle.showNextBtn" :label="true">是</el-radio>
              <el-radio v-model="timeline.emphasis.controlStyle.showNextBtn" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="位置">
               <el-select v-model="timeline.emphasis.controlStyle.position" placeholder="left" size="mini">
                <el-option label="左" value="left"/>
                <el-option label="右" value="right"/>
                <el-option label="上" value="top"/>
                <el-option label="下" value="bottom"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="大小">
                <el-input-number v-model="timeline.emphasis.controlStyle.itemSize" :min="0" :max="40" size="mini"/>
            </el-form-item>
            <el-form-item  label="间距">
                <el-input-number v-model="timeline.emphasis.controlStyle.itemGap" :min="0" :max="40" size="mini"/>
            </el-form-item>
            <el-form-item  label="颜色" >
              <el-color-picker v-model="timeline.emphasis.controlStyle.color" show-alpha size="small" @active-change="timelineEmphasisControltStyleColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="边框颜色" >
              <el-color-picker v-model="timeline.emphasis.controlStyle.borderColor" show-alpha size="small" @active-change="timelineEmphasisControlStyleBorderColor"></el-color-picker>
            </el-form-item>
            <el-form-item  label="边框宽度">
                <el-input-number v-model="timeline.emphasis.controlStyle.borderWidth" :min="0" :max="40" size="mini"/>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
    }
  },
  methods: {
    timelineLinetStyleColor (val) {
      this.timeline.lineStyle.color = val
    },
    timelineLabelColor (val) {
      this.timeline.label.color = val
    },
    timelineControltStyleColor (val) {
      this.timeline.controlStyle.color = val
    },
    timelineControlStyleBorderColor (val) {
      this.timeline.controlStyle.borderColor = val
    },
    timelineEmphasisLabelColor (val) {
      this.timeline.emphasis.label.color = val
    },
    timelineEmphasisControltStyleColor (val) {
      this.timeline.emphasis.controlStyle.color = val
    },
    timelineEmphasisControlStyleBorderColor (val) {
      this.timeline.emphasis.controlStyle.borderColor = val
    }
  },
  computed: {
    timeline () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.timeline
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
